<script setup>
import { reactive, onMounted, computed, watch } from 'vue';
import { iuserLogout } from '@T2/service/api.ts';
import { useCurrentWatchStore, useIuserInfoStore, useLocalStorage } from '@T2/store/users.ts';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { deepCopy, findNodeRoot } from '@T2/utils/utils.ts';
import { getToSomeProjectPath } from '@T2/utils/users.ts';
import SvgMask from '@T2/components/common/svgMask.vue';
import EnlargeSvg from '~icons/custom/enlarge-style';
import RowsSvg3 from '~icons/custom/rows-3';

const route = useRoute();
const router = useRouter();
const iuserInfoStore = useIuserInfoStore();
const { info } = iuserInfoStore;
const currentWatchStore = useCurrentWatchStore();
const { curMenus } = currentWatchStore;
const projectList = deepCopy(currentWatchStore.getProjectsOfValidMenus);
const localStorage = useLocalStorage();
const isCollapse = computed(() => localStorage.menuCollapse);

onMounted(() => {
  if (!info.company) {
    ElMessage.error('登录过期，请重新登录');
    setTimeout(() => {
      location.href = "/";
    }, 500);
    return;
  }
  init();
});

const goToProject = (project) => {
  const path = getToSomeProjectPath(project.id);
  if (path) {
    router.push(path);
  } else {
    ElMessage.error('暂无登入权限，请联系管理员');
  }
}

const Resd = reactive({
  menus: [],
  enlargeable: false,
  loaded: false,
  
  avatarPop: false,
});
const init = () => {
  const pcMenus = deepCopy(curMenus);
  Resd.enlargeable = pcMenus.find(item => item.type === 'PC-enlarge') ? true : false;
  
  Resd.menus = pcMenus.filter(item => item.type === 'PC-aside') || [];
  const path = route.path;
  if (path === '/C/Manage') {
    initMenu();
    Resd.loaded = true;
    return;
  }
  
  let menus = Resd.menus.find(items => items.menu__path === path || items.children?.find(item => item.menu__path === path));
  if (menus) {
    let menu = menus.children?.find(item => item.menu__path === path);
    activeMenu(menus, menu || {});
  } else {
    initMenu();
  }
  
  Resd.loaded = true;
}
const initMenu = () => {
  let menus = Resd.menus[0];
  let menu = menus.children.length ? menus.children[0] : {};
  activeMenu(menus, menu);
  router.push(menu.id ? menu.menu__path : menus.menu__path);
}
const activeMenu = (menus, menu) => {
  Resd.menus.forEach(items => {
    items.isActive = items.id === menus.id;
    items.children?.forEach(item => {
      item.isActive = item.id === menu?.id;
    });
  })
}
watch(() => route.path, (nv, ov) => {
  if (nv) {
    const menus = findNodeRoot(Resd.menus, 'menu__path', nv);
    const menu = menus.children?.find(item => item.menu__path === nv);
    activeMenu(menus, menu || {});
  }
});

const loginout = () => {
  iuserLogout({
    method: "get",
    params: {}
  }).then(res => {
    router.push('/');
  }).catch(error => {
    router.push('/');
  });
}
</script>

<template>
  <el-container>
    <el-header class="flex--center">
      <el-popover
        v-if="projectList.length"
        popper-style="min-width: auto; padding: 5px 0; transform: translateY(-7px)"
        placement="bottom-end"
        :width="200"
        trigger="click"
      >
        <template #reference>
          <el-icon class="backCo-icon pointer" size="25"><RowsSvg3 /></el-icon>
        </template>
        <div class="p-list flex-column">
          <button v-for="item in projectList" @click="goToProject(item)">{{ item.name }}</button>
        </div>
      </el-popover>
      
      <div class="company-name flex--center">{{ info.company_name }}</div>
      <el-icon class="enlarge-tab pointer" @click="router.push('/C/Display')" v-if="Resd.enlargeable"> <EnlargeSvg /> </el-icon>
      
      <div class="avatar circle-bg pointer" @click="Resd.avatarPop = true">
        <span>{{ info.truename?.substr(-2, 2) }}</span>
        <template v-if="Resd.avatarPop">
          <div class="layout" @click.stop="Resd.avatarPop = false"></div>
          <div class="avatar-pop flex-column">
            <div class="pop-item detail flex-column flex-center">
              <div class="avatar2 circle-bg">{{ info.truename?.substr(-2, 2) }}</div>
              <span>{{ info.truename }}</span>
              <span>{{ info.contract }}</span>
            </div>
            <div class="pop-item" @click.stop="router.push('/login?reset=true')">修改密码</div>
            <div class="pop-item" @click.stop="loginout()">退出登录</div>
          </div>
        </template>
      </div>
    </el-header>
    
    <el-container>
      <el-aside>
        <el-menu
          class="el-menu-vertical-demo"
          popper-class="el-popper-self"
          :default-active="route.path"
          :unique-opened="true"
          :router="true"
          :collapse="localStorage.menuCollapse"
        >
          <template v-for="(items, indexs) in Resd.menus">
            <el-sub-menu :teleported="false" v-if="items.children?.length" :index="'' + indexs">
              <template #title>
                <svg-mask
                  :iconFile="items.icon__file__file"
                  :iconColor="items.isActive ? items.icon__color || '#ffffff' : '#a8a8a8'"
                  :iconSize="isCollapse ? 20 : 16"
                />
                <span>{{ items.alias }}</span>
              </template>
              <el-menu-item v-for="item in items.children" :index="item.menu__path">
                <template #title>{{ item.alias }}</template>
              </el-menu-item>
            </el-sub-menu>
            
            <el-menu-item :index="items.menu__path" v-else>
              <svg-mask
                :iconFile="items.icon__file__file"
                :iconColor="items.isActive ? items.icon__color || '#ffffff' : '#a8a8a8'"
                :iconSize="isCollapse ? 20 : 16"
              />
              <template #title>{{ items.alias }}</template>
            </el-menu-item>
          </template>
        </el-menu>
        <el-tooltip :content="isCollapse ? '展开菜单' : '收起菜单'" placement="right">
          <div class="expand-fold flex" @click="localStorage.menuCollapse = !isCollapse">
            <el-icon color="#fff" size="20">
              <DArrowRight v-if="isCollapse"/>
              <DArrowLeft v-else/>
            </el-icon>
          </div>
        </el-tooltip>
        
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
$header-height: 50px;
.p-list {
  width: 200px;
  button {
    border: none;
    border-radius: 0;
    background-color: transparent;
    height: 36px;
    line-height: 36px;
    text-align: left;
    white-space: nowrap;
    padding: 0 20px;
    font-weight: 400;
    font-size: 14px;
    color: #303133;
    cursor: pointer;
    &:hover {
      color: #409EFF;
      background-color: #ECF5FF;
    }
  }
}
.company-name {
  margin-left: 10px;
}
.backCo-icon {
  width: 50px;
  text-align: center;
}
.enlarge-tab {
  width: 21px;
  height: 17px;
  margin-left: 23px;
}
.circle-bg {
  width: 37px;
  height: 37px;
  line-height: 37px;
  font-size: 13px;
  border-radius: 50%;
  color: #FFFFFF;
  text-align: center;
}
.layout {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
}
.avatar {
  margin-right: 23px;
  background-color: #373E62;
  margin-left: auto;
  position: relative;
}
.avatar-pop {
  width: fit-content;
  min-width: 160px;
  background-color: #ffffff;
  position: absolute;
  right: 50%;
  top: 100%;
  box-shadow: 0 0 3px 3px rgba(170, 170, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  z-index: 1000;
  .pop-item {
    padding: 5px 10px;
    width: 100%;
    height: 45px;
    line-height: 35px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color: #3f3f3f;
    font-size: 14px;
    white-space: nowrap;
    text-align: left;
    &:hover {
      background-color: #f4f4f4;
      color: #000000;
    }
  }
  .detail {
    padding-left: 57px;
    color: #3f3f3f;
    position: relative;
    font-size: 12px;
    font-family: PingFangSC,PingFang SC;
    height: 60px;
    line-height: 20px;
    .avatar2 {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(56, 56, 84, 0.7);
    }
  }
}
.expand-fold {
  width: 100%;
  height: 35px;
  border-top: 1px solid #aaaaff;
  opacity: 0.5;
  position: absolute;
  bottom: 0;
  cursor: pointer;
  i {
    margin: auto;
  }
}
</style>

<style scoped>
.el-main {
  max-height: calc(100vh - 50px);
  padding: 0;
  background-color: #F5F6FA;
  position: relative;
  overflow: hidden;
}
.el-header {
  height: 50px;
  line-height: 50px;
  background-color: #001A3C;
  font-size: 21px;
  color: #FFFFFF;
  font-family: Source Han Sans CN, Source Han Sans CN;
  padding: 0;
  box-shadow: 0px 1px 3px 0px rgba(18,30,52,0.2);
}

/* 侧边菜单栏 */
.el-aside {
  background-color: #353D65;
  width: fit-content;
  height: calc(100vh - 50px);
  overflow: visible;
  position: relative;
}
.el-menu {
  width: 170px;
  border-color: #353D65;
  --el-menu-bg-color: #353D65;
  --el-menu-hover-bg-color: #44558E;
  --el-menu-text-color: #848BAD;
  --el-menu-level-padding: 25px;
}
.el-menu.el-menu--collapse {
  width: 50px;
}
:deep(.el-menu--collapse .el-sub-menu.is-active) {
  background-color: #44558E;
}
:deep(.el-sub-menu.is-active .el-sub-menu__title) {
  color: #e8e8e8;
}
:deep(.el-menu-item.is-active) {
  background-color: #556bb3;
  color: #fff;
}
:deep(.el-sub-menu__title) {
  padding: 0;
}
:deep(.el-menu.el-menu--collapse .el-sub-menu__title) {
  justify-content: center;
}
:deep(.svg-mask-icon) {
  margin-right: 8px;
}
:deep(.el-menu.el-menu--collapse .svg-mask-icon) {
  margin-right: 0;
}
:deep(.el-menu-tooltip__trigger) {
  padding: 0;
  justify-content: center;
}
:deep(.el-popper-self) {
  --el-bg-color-overlay: #353D65;
  --el-menu-text-color: #fff;
  border: none;
}
:deep(.el-menu--popup) {
  min-width: 100px;
}
</style>